<template>
	<view class="pop-promot-box">
		<view class="pop-promot-back">
			<image class="pop-back-img" src="../../static/image/homePage/diwen.png" mode="scaleToFill" />
			<image v-if="showClose" src="../../static/image/fjj/close.png" class="close-btn" @click="close"></image>
			<view class="pop-content-back">
				<view class="pop-promot-title">
					{{title}}
					<view class="en">Settings</view>
				</view>
				<view class="text-content-view">
					<text class="pop-promot-count">发音官｜Pronouncer</text>
					<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
						<view style="flex: 1;position: relative;">
							<uv-slider :disabled="fayinguan_volume_status==false" v-model="fayinguan_volume_value"
								 min="0.5" max="1" step="0.01" @changing="fnChangeVolume('fayinguan')"
								@change="fnChangeVolume('fayinguan')"></uv-slider>

							<view v-if="fayinguan_volume_status==false" class=""
								style="background-color: #cccccc50;position: absolute;width: 100%;height: 100%;z-index: 100;top:0px;left:0px;"
								@click="fnTip()">
							</view>
						</view>
						<view class="value-class">
							{{fayinguan_volume_value}}
						</view>
						<view style="width: auto;margin-left: 5px;">
							<uv-switch v-model="fayinguan_volume_status" :disabled="true" @change="fnChangeStatus('fayinguan')"
								activeColor="#f56c6c"></uv-switch>
						</view>
					</view>
					<text class="pop-promot-count">音乐｜Music</text>
					<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
						<view style="flex: 1;position: relative;">
							<uv-slider :disabled="yinyue_volume_status==false" v-model="yinyue_volume_value"
								 min="0.5" max="1" step="0.01" @changing="fnChangeVolume('yinyue')"
								@change="fnChangeVolume('yinyue')"></uv-slider>

							<view v-if="yinyue_volume_status==false" class=""
								style="background-color: #cccccc50;position: absolute;width: 100%;height: 100%;z-index: 100;top:0px;left:0px;"
								@click="fnTip()">
							</view> 
						</view>
						<view class="value-class">
							{{yinyue_volume_value}}
						</view>
						<view style="width: auto;margin-left: 5px;">
							<uv-switch v-model="yinyue_volume_status" @change="fnChangeStatus('yinyue')"
								activeColor="#f56c6c"></uv-switch>
						</view>
					</view>
					<text class="pop-promot-count">音效｜Sound Effects</text>
					<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
						<view style="flex: 1;position: relative;">
							<uv-slider :disabled="yinxiao_volume_status==false" v-model="yinxiao_volume_value"
								 min="0" max="1" step="0.01" @changing="fnChangeVolume('yinxiao')"
								@change="fnChangeVolume('yinxiao')"></uv-slider>
							<view v-if="yinxiao_volume_status==false" class=""
								style="background-color: #cccccc50;position: absolute;width: 100%;height: 100%;z-index: 100;top:0px;left:0px;"
								@click="fnTip()">
							</view>
						</view>
						<view class="value-class">
							{{yinxiao_volume_value}}
						</view>
						<view style="width: auto;margin-left: 5px;">
							<uv-switch v-model="yinxiao_volume_status" @change="fnChangeStatus('yinxiao')"
								activeColor="#f56c6c"></uv-switch>
						</view>
					</view>

					<!-- ==================================================================================================== -->
					<!-- ==================================================================================================== -->
					<!-- ==================================================================================================== -->

					<view v-show="false">
						<text class="pop-promot-count">背景音乐：menu{{background_volume_of_menu}}</text>
						<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
							<view style="flex: 1;">
								<uv-slider v-model="background_volume_of_menu" min="0" max="1"
									step="0.01" @changing="fnChangeVolume('menu')"
									@change="fnChangeVolume('menu')"></uv-slider>
							</view>
							<view class="value-class">
								{{background_volume_of_menu}}
							</view>
							<view style="width: auto;">
								<uv-switch v-model="background_volume_of_menu_status" activeColor="#f56c6c"></uv-switch>
							</view>
						</view>
						<text class="pop-promot-count">背景音乐：rank{{background_volume_of_rank}}</text>
						<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
							<view style="flex: 1;">
								<uv-slider v-model="background_volume_of_rank" min="0" max="1"
									step="0.01" @changing="fnChangeVolume('rank')"
									@change="fnChangeVolume('rank')"></uv-slider>
							</view>
							<view class="value-class">
								{{background_volume_of_rank}}
							</view>
							<view style="width: auto;">
								<uv-switch v-model="background_volume_of_rank_status" activeColor="#f56c6c"></uv-switch>
							</view>
						</view>
						<text class="pop-promot-count">背景音乐：game</text>
						<view style="width: 100%;display: flex;flex-direction: row;align-items: center;">
							<view style="flex: 1;">
								<uv-slider v-model="background_volume_of_game" min="0" max="1"
									step="0.01" @changing="fnChangeVolume('game')"
									@change="fnChangeVolume('game')"></uv-slider>
							</view>
							<view class="value-class">
								{{background_volume_of_game}}
							</view>
							<view style="width: auto;">
								<uv-switch v-model="background_volume_of_game_status" activeColor="#f56c6c"></uv-switch>
							</view>
						</view>
					</view>
				</view>
				<view class="pop-promot-button" @click="confirm">关闭
					<view class="btn-en">Close</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '提示'
			},
			msg: {
				optionalTypes: String | null,
				default: ''
			},
			btnTxt: {
				type: String,
				default: '确定'
			},
			showClose: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				fayinguan_volume_status: true,//uni.getStorageSync('fayinguan_volume_status') == true ? true : false,
				yinyue_volume_status: uni.getStorageSync('yinyue_volume_status') == true ? true : false,
				yinxiao_volume_status: uni.getStorageSync('yinxiao_volume_status') == true ? true : false,
				background_volume_of_menu_status: uni.getStorageSync('background_volume_of_menu_status') == true ? true :
					false,
				background_volume_of_rank_status: uni.getStorageSync('background_volume_of_rank_status') == true ? true :
					false,
				background_volume_of_game_status: uni.getStorageSync('background_volume_of_game_status') == true ? true :
					false,

				fayinguan_volume_value: uni.getStorageSync('fayinguan_volume_value') >= 0 ? uni.getStorageSync(
					'fayinguan_volume_value') : 0.7,
				yinyue_volume_value: uni.getStorageSync('yinyue_volume_value') >= 0 ? uni.getStorageSync(
					'yinyue_volume_value') : 0.5,
				yinxiao_volume_value: uni.getStorageSync('yinxiao_volume_value') >= 0 ? uni.getStorageSync(
					'yinxiao_volume_value') : 0.5,
				background_volume_of_menu: uni.getStorageSync('background_volume_of_menu') >= 0 ? uni.getStorageSync(
					'background_volume_of_menu') : 0.5,
				background_volume_of_rank: uni.getStorageSync('background_volume_of_rank') >= 0 ? uni.getStorageSync(
					'background_volume_of_rank') : 0.5,
				background_volume_of_game: uni.getStorageSync('background_volume_of_game') >= 0 ? uni.getStorageSync(
					'background_volume_of_game') : 0.1,

			}
		},
		methods: {
			fnTip() {
				var that = this;
				uni.showToast({
					title: '请打开开关状态',
					icon: 'error'
				})
			},

			// 改变开关状态
			fnChangeStatus(type) {
				var that = this;
				if (type == 'fayinguan') {
					console.log('当前type=', type)
					console.log('状态：', that.fayinguan_volume_status)
					// that.$eventBus.$emit('callMethodIn_fayinguan_volume_status', {
					// 	type: type,
					// 	status: that.fayinguan_volume_status
					// })
					uni.setStorageSync('fayinguan_volume_status', that.fayinguan_volume_status); // 保存音量值到本地存储
				}
				if (type == 'yinyue') {
					console.log('当前type=', type)
					console.log('状态：', that.yinyue_volume_status)
					// that.$eventBus.$emit('callMethodIn_yinyue_volume_status', {
					// 	type: type,
					// 	status: that.yinyue_volume_status
					// })
					uni.setStorageSync('yinyue_volume_status', that.yinyue_volume_status); // 保存音量值到本地存储
				}
				if (type == 'yinxiao') {
					console.log('当前type=', type)
					console.log('状态：', that.yinxiao_volume_status)
					// that.$eventBus.$emit('callMethodIn_yinxiao_volume_status', {
					// 	type: type,
					// 	status: that.yinxiao_volume_status
					// })
					uni.setStorageSync('yinxiao_volume_status', that.yinxiao_volume_status); // 保存音量值到本地存储
				}
			},

			// 改变音量大小
			fnChangeVolume(type) {
				var that = this;
				if (type == 'fayinguan') {
					console.log('当前type=', type)
					// that.$eventBus.$emit('callMethodIn_fayinguan_volume', {
					// 	type: type,
					// 	volume: that.fayinguan_volume_value
					// })
					this.fayinguan_volume_value = Number(this.fayinguan_volume_value.toFixed(2));
					console.log('背景音量：', that.fayinguan_volume_value)
					
					uni.setStorageSync('fayinguan_volume_value', that.fayinguan_volume_value); // 保存音量值到本地存储
				}
				if (type == 'yinyue') {
					console.log('当前type=', type)
					// that.$eventBus.$emit('callMethodIn_yinyue_volume', {
					// 	type: type,
					// 	volume: that.yinyue_volume_value
					// })
					console.log('背景音量：', that.yinyue_volume_value)
					this.yinyue_volume_value = Number(this.yinyue_volume_value.toFixed(2));
					uni.setStorageSync('yinyue_volume_value', that.yinyue_volume_value);

					// 同时联动设置背景音乐
					if ('menu') {
						// that.$eventBus.$emit('callMethodIn_background_type', {
						// 	type: 'menu',
						// 	status: 'no' // no 不改变当前声音类型  current_background_voice_type
						// })
						// that.$eventBus.$emit('callMethodIn_background_volume', {
						// 	type: 'menu',
						// 	volume: that.yinyue_volume_value
						// })						
						uni.setStorageSync('background_volume_of_menu', this.yinyue_volume_value);
						this.background_volume_of_menu = this.yinyue_volume_value;
					}
					if ('rank') {
						// that.$eventBus.$emit('callMethodIn_background_type', {
						// 	type: 'rank',
						// 	status: 'no' // no 不改变当前声音类型  current_background_voice_type
						// })
						// that.$eventBus.$emit('callMethodIn_background_volume', {
						// 	type: 'rank',
						// 	volume: that.yinyue_volume_value
						// })
						uni.setStorageSync('background_volume_of_rank', that.yinyue_volume_value);
						that.background_volume_of_rank = that.yinyue_volume_value;
					}
					if ('game') {
						// that.$eventBus.$emit('callMethodIn_background_type', {
						// 	type: 'game',
						// 	status: 'no' // no 不改变当前声音类型  current_background_voice_type
						// })
						// that.$eventBus.$emit('callMethodIn_background_volume', {
						// 	type: 'game',
						// 	volume: that.yinyue_volume_value - 0.5 +
						// 		0.1
						// })
						uni.setStorageSync('background_volume_of_game', that.yinyue_volume_value - 0.5 +
							0.1);
						that.background_volume_of_game = that.yinyue_volume_value - 0.5 +
							0.1;
					}
				}
				if (type == 'yinxiao') {
					console.log('当前type=', type)
					console.log('背景音量：', that.yinxiao_volume_value)
					// that.$eventBus.$emit('callMethodIn_yinxiao_volume', {
					// 	type: type,
					// 	volume: that.yinxiao_volume_value
					// })
					this.yinxiao_volume_value = Number(this.yinxiao_volume_value.toFixed(2));
					uni.setStorageSync('yinxiao_volume_value', that.yinxiao_volume_value); // 保存音量值到本地存储
				}


				if (type == 'menu') {
					console.log('当前-----------------type=', that.background_volume_of_menu)
					// that.$eventBus.$emit('callMethodIn_background_type', {
					// 	type: 'menu',
					// 	status: 'no'
					// })
					// that.$eventBus.$emit('callMethodIn_background_volume', {
					// 	type: type,
					// 	volume: that.background_volume_of_menu
					// })
					uni.setStorageSync('background_volume_of_menu', that.background_volume_of_menu); // 保存音量值到本地存储
				}
				if (type == 'rank') {
					console.log('当前-----------------type=', that.background_volume_of_rank)
					// that.$eventBus.$emit('callMethodIn_background_type', {
					// 	type: 'rank',
					// 	status: 'no'
					// })
					// that.$eventBus.$emit('callMethodIn_background_volume', {
					// 	type: type,
					// 	volume: that.background_volume_of_rank
					// })
					uni.setStorageSync('background_volume_of_rank', that.background_volume_of_rank); // 保存音量值到本地存储
				}
				if (type == 'game') {
					console.log('当前-----------------type=', that.background_volume_of_rank)
					// that.$eventBus.$emit('callMethodIn_background_type', {
					// 	type: 'game',
					// 	status: 'no'
					// })
					// that.$eventBus.$emit('callMethodIn_background_volume', {
					// 	type: type,
					// 	volume: that.background_volume_of_game
					// })
					uni.setStorageSync('background_volume_of_game', that.background_volume_of_game); // 保存音量值到本地存储
				}

			},
			confirm: function(e) {
				var that = this;
				that.$emit('confirm');
				that.$eventBus.$emit('callMethodIn_background_type', {
					type: uni.getStorageSync('current_background_voice_type')
				})
			},
			close() {
				this.$emit('close');
			}
		},
	}
</script>

<style lang="less">
	.pop-promot-box {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 101;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* .pop-promot-back{
	    padding: 40rpx;
	    width: 70%;
	    margin: 0 15%;
	    border-radius: 20rpx;
	    background: #fff;
	    box-sizing: border-box;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	  } */
	.pop-back-img {
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: 99;
		position: absolute;
	}

	.pop-content-back {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 100;
	}

	.pop-promot-back {
		padding: 5% 5%;
		width: 80%;
		margin: 0 10%;
		border-radius: 10px;
		/* background-image: url(https://cdn.spbcn.org/spbcnappneed/onlineGameRuleBackView2.png);
	    background-repeat: no-repeat;
	    background-size: 100% 100%;  box-sizing: border-box; */
		background: linear-gradient(0deg, #130E00 0%, #373632 100%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}


	.pop-promot-count {
		font-size: 14px;
		color: black;
		text-align: left;
		font-weight: 600;
		padding: 10px 0;
		border-radius: 10px;
		margin-top: 5px;
		color: #fff;
		line-height: 26px;
		font-family: normal;
	}

	.pop-promot-button {
		margin-top: 13px;
		width: 120px;
		height: 36px;
		border-radius: 36px;
		color: #000;
		font-size: 14px;
		font-family: 'hzgb';
		text-align: center;
		background: linear-gradient(to bottom, #ffd16b, #fff497);
		box-shadow: 0px 6px 0px 0px #d9b059;
		// line-height: 32px;
		padding-top: 4px;
	}

	.pop-promot-title {
		font-size: 22px;
		color: white;
		text-align: center;
		margin-bottom: 8px;
		font-family: 'hzgb';
		// text-shadow: -1px 1px 0 #992722, 1px 1px 0 #992722,1px -1px 0 #992722,-1px -1px 0 #992722;
		// -webkit-text-stroke: 1px #992722;
		.en{
			font-size: 14px;
		}
	}

	.text-content-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.close-btn {
		position: absolute;
		right: 18px;
		top: 16px;
		z-index: 1000;
		width: 24px;
		height: 24px;
	}

	.kefu {
		.txt {
			text-align: center;
			color: #fff;
			font-size: 12px;
			margin-bottom: 10px;
		}

		.img {
			width: 200px;
			height: 200px;
		}
	}
	.value-class{
		width: 30px;
		font-size: 10px;
		color: white;
		text-align: center;
	}
</style>